<template>
    <div class="temperatureWrap zy-content">
        <div class="searchBox">
            <Form label-position="right" :label-width="130" class="search-form">
                <Row >
                    <Col span="8" >
                        <FormItem label="设备：">
                            <Select filterable
                                    clearable
                                    v-model="equipment"
                                    :remote-method="remoteMethod1"
                                    @on-change="equipmentChange"
                                    :loading="loading1"
                                    :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="item of equipmentList" :value="item.deviceId" :key="item.deviceId">{{item.deviceNo +'-'+item.deviceName +'-'+item.deviceMId}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8" >
                        <FormItem label="日期范围：">
                            <DatePicker @on-change="timeOnChange" :value="value2" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :placeholder="`${$t('common.selectInfo')}`" :clearable="false"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="4" align="center">
                        <Button type="primary" @click="queryBtn" v-has="'colDataRecentDataList'">{{$t('common.Query')}}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btns clear">
            <span  class="creatBtnright" @click="exportTemplateClick" v-has="'colDataExportRecentData'">
                <span><Icon type="ios-cloud-download-outline" /></span>
                <span class="rightbtn">{{$t('common.Export')}}</span>
            </span>
        </div>
         <div class="tableContent">
              <Table max-height="550" class="tableStyle" ref="selection" :columns="columns1" :data="tableList">
            </Table>
        </div>
        <div class="pageWrapper">
            <!-- <Page :total="total" :current="pageNum" :page-size="pageSize" @on-change="changePage"
                  @on-page-size-change="changePageSize" show-sizer show-total/> -->
            <Button type="primary" @click="upClick" :disabled='upBtnShowF' :loading="loading" style="margin-right:10px">上一页</Button>
            <Button type="primary" @click="downClick" :loading="loading" :disabled='downBtnShowF'>下一页</Button>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default {
        name: "fieldManage",
        components: {},
        data(){
            return{
                data:[],
                value1: [],
                value2:[
                    moment(new Date().getTime()).format('YYYY-MM-DD')+' 00:00:00',
                    moment(new Date()).format(('YYYY-MM-DD'))+' 23:59:59'
                ],
                // value2:['2021-07-31 00:00:00',moment(new Date()).format(('YYYY-MM-DD'))+' 23:59:59'],
                equipment:'',
                loading1:false,
                haveInputValue:true,
                equipmentList:[],
                columns1:[],
                selectDeleteId: [],
                tableList: [],
                total:0,
                pageNum:1,
                pageSize:10,
                loading:false,
                upBtnShowF:true,
                downBtnShowF:false,
                loading2:false,
            }
        },
        created() {
            // console.log(typeof moment().format(('YYYY-MM-DD')));
            // console.log(typeof moment(new Date().getTime()-1000*60*60*24).format('YYYY-MM-DD'))

        },
        methods: {
            upClick(){
                this.pageNum -=1;
                if(this.pageNum===1){
                    this.upBtnShowF = true
                }
                this.queryBtn();
            },
            downClick(){
                this.pageNum +=1;
                this.queryBtn();
            },
            getEquipmentValue(device){
                this.axios({
                    method: 'get',
                    // url: '/dms/environment/iotList',
                    url: '/dms/dmsDevice/getDeviceDetail',
                    params:{
                        deviceMIdOrNo:device,
                    }
                }).then(res => {
                    if(res.code == 200){
                        this.equipmentList =res.data;
                    }
                })
            },
            remoteMethod1(query) {
                // console.log(query !== this.hDataF.deviceName && query !== this.hDataF.deviceId);
                    if (query !=='') {
                        this.loading1 = true;
                        setTimeout(() => {
                            this.loading1 = false;
                            this.getEquipmentValue(query)   //以输入的设备名去查询
                        }, 200);
                    } else {
                        this.equipmentList = [];
                    }
                },
            equipmentChange(value){
                this.equipment =  value
            },
            timeOnChange(value){
                this.value2=value;
            },
            queryBtn(){

                if (!this.equipment) {
                    this.$Message.warning('请选择设备');
                    return false;
                }
                if (this.value2.includes('')) {
                    this.$Message.warning('请选择起始时间');
                    return false;
                }
                
                let params={
                    deviceId:this.equipment,
                    startTime:this.value2[0],
                    endTime:this.value2[1],
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                }
                if(this.value2[1]&&(this.$moment(this.value2[1])-this.$moment(this.value2[0]))/(24*3600*1000)<=2){
                    params.startTime = this.$moment(this.value2[0]).format('YYYY-MM-DD HH:mm:ss')
                    params.endTime = this.$moment(this.value2[1]).format('YYYY-MM-DD HH:mm:ss')
                }else{
                    this.$Message.warning(({content:"日期间隔不能超过2天",duration:6,closable:true}));
                    return false;
                }
                // console.log(params);
                // return
                this.loading = true
                this.axios({
                    method: 'get',
                    url: '/dms/colData/recentDataList',
                    params:params
                }).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.columns1 = this.setColumns(res.data.list)
                        this.tableList = res.data.list;
                        this.total = res.data.total;
                        if(this.tableList.length<this.pageSize){
                            this.downBtnShowF = true
                        }else{
                            this.downBtnShowF = false
                        }
                        if(this.pageNum>1){
                            this.upBtnShowF = false
                        }
                    }
                })

            },
            setColumns(arr){
                let arr1  = []
                arr[0] && Object.keys(arr[0]).forEach(item => {
                    if(item==='ToolLifes'){
                        arr1.push({
                            title: item,
                            dataIndex: item,
                            key: item,
                            align:'center',
                            minWidth: 200,
                            ellipsis:true,
                            render: (h, params) => {
                                let texts = params.row.ToolLifes
                                return h('Tooltip', {
                                    props: {
                                        placement: 'right',
                                        transfer:true
                                    },
                                }, [texts,
                                    h('span', {
                                        slot: 'content',
                                        style: {
                                            whiteSpace: 'normal',
                                            wordBreak: 'break-all'
                                        }
                                    }, params.row.ToolLifes)
                                ])
                            }
                        })
                    }else if(item==='Servos'){
                        arr1.push({
                            title: item,
                            dataIndex: item,
                            key: item,
                            align:'center',
                            minWidth: 200,
                            ellipsis:true,
                            render: (h, params) => {
                                let texts = params.row.Servos
                                return h('Tooltip', {
                                    props: {
                                        placement: 'right',
                                        transfer:true
                                    },
                                }, [texts,
                                    h('span', {
                                        slot: 'content',
                                        style: {
                                            whiteSpace: 'normal',
                                            wordBreak: 'break-all'
                                        }
                                    }, params.row.Servos)
                                ])
                            }
                        })
                    }else if(item==='Spindles'){
                        arr1.push({
                            title: item,
                            dataIndex: item,
                            key: item,
                            align:'center',
                            minWidth: 200,
                            ellipsis:true,
                            render: (h, params) => {
                                let texts = params.row.Spindles
                                return h('Tooltip', {
                                    props: {
                                        placement: 'right',
                                        transfer:true
                                    },
                                }, [texts,
                                    h('span', {
                                        slot: 'content',
                                        style: {
                                            whiteSpace: 'normal',
                                            wordBreak: 'break-all'
                                        }
                                    }, params.row.Spindles)
                                ])
                            }
                        })
                    }else{
                        arr1.push({
                            title: item,
                            dataIndex: item,
                            key: item,
                            minWidth: 200,
                            align:'center',
                            ellipsis:true,
                            
                        })
                    }
                })
                return arr1
            },
            // 切换每页显示的数据量
            changePageSize(pageSize) {
                this.pageNum = 1;
                this.pageSize = pageSize;
                this.queryBtn();
            },
            //分页
            changePage(pageNum) {
                this.pageNum = pageNum;
                this.queryBtn();
            },
            exportTemplateClick() {
                if (!this.equipment) {
                    this.$Message.warning('请选择设备');
                    return false;
                }
                if (this.value2.includes('')) {
                    this.$Message.warning('请选择起始时间');
                    return false;
                }
                if(this.loading2){
                    this.$Message.warning(({content:"正在下载中,请稍等",duration:6,closable:true}));
                    return false;
                }
                let params = {
                    deviceId:this.equipment,
                    startTime:this.value2[0],
                    endTime:this.value2[1],
                };
                if(this.value2[1]&&(this.$moment(this.value2[1])-this.$moment(this.value2[0]))/(24*3600*1000)<=2){
                    params.startTime = this.$moment(this.value2[0]).format('YYYY-MM-DD HH:mm:ss')
                    params.endTime = this.$moment(this.value2[1]).format('YYYY-MM-DD HH:mm:ss')
                }else{
                    this.$Message.warning(({content:"日期间隔不能超过2天",duration:6,closable:true}));
                    return false;
                }
                this.loading2 = true
                this.axios({
                    method: 'get',
                    url: '/dms/colData/exportRecentData',
                    params:params,
                    responseType: 'blob',
                }).then(blobRes => {
                    this.loading2 = false
                    let blob = new Blob([blobRes], {type: "application/vnd.ms-excel"})
                    this.num++;
                    let downloadElement = document.createElement('a');
                    let objectUrl = window.URL.createObjectURL(blob) // 创建URL
                    downloadElement.href = objectUrl
                    downloadElement.download = '数采详情'+'.xlsx'; // 自定义文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); // 下载文件
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(objectUrl); // 释放内存
                })
            },
        },
    }
</script>
<style scoped lang="scss">
    .temperatureWrap {
        width: 100%;
        // padding: 0 20px;
        background-color: #f3f4fa;
        
        .tableStyle{
            margin-top: 10px;
        }
        .pageWrapper {
            text-align: center;
            height: 90px;
            line-height: 90px;
            .ivu-page {
                .ivu-page-total {
                    display: inline-block;
                    vertical-align: middle;
                    min-width: 100px;
                    height: 32px;
                    line-height: 30px;
                    margin-right: 4px;
                    text-align: center;
                    list-style: none;
                    background-color: #fff;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    cursor: pointer;
                    font-family: Arial;
                    font-weight: 500;
                    border: 1px solid #dcdee2;
                    border-radius: 4px;
                    transition: border .2s ease-in-out, color .2s ease-in-out;
                }
            }
        }



        .exportTemplate {
            float: right;
            margin-right: 30px;
            font-weight: normal;
            cursor: pointer;
            i {
                display: inline-block;
                vertical-align: middle;
                font-size: 30px;
                color: #2296f4;
            }
            span {
                display: inline-block;
                vertical-align: middle;
                margin-left: 10px;
                color: #555;
            }
        }
        .exportTemplate {
            i {
                color: #2296f4;
            }
        }
    }
</style>

<style lang="scss">

</style>
